<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Node_prototype方法</title>
</head>
<body>
    <div id="app">
        <h1 id="h">
            <p>我是原先的</p>
        </h1>
    </div>
</body>
<script>
    var d = document.getElementById('app')
    
    var p = document.createElement('p')

    var h = document.getElementById('h')

    p.innerHTML = '我是一个插入元素'

    // console.log(p)

    // p.innerHTML = '我是一个追加的元素p'

    //注意：以下四个方法都是在父节点上调用
    
    // d.appendChild(p)       //往父节点中添加一个新的节点

    // d.insertBefore(p,h)    //第一个参数：要插入的元素；第二个参数：参照元素，把p插入到h之前

    // d.replaceChild(p,h)    //第一个参数：要插入的元素；第二个参数：要替换的元素，用p把h替换

    // d.removeChild(h)       //参数：是要移除的元素，移除h元素

    var clone_h = h.cloneNode(true)

    clone_h.id = 'clone_h'
    
    d.appendChild(clone_h)
    
    console.log(clone_h)
</script>
</html>